<script lang="ts" setup>
import { ref } from 'vue';
import { Message } from '../../common/types';
import { DialogResult } from '../../common/enums';
const props = defineProps<{ data: Message }>();
const emits = defineEmits(['close']);
const data = ref(props.data);
const save = () => {
    emits('close', DialogResult.Ok);
};
const cancel = () => {
    emits('close', DialogResult.Cancel);
};

const autoGenerateName = () => {
    data.value.name = `S${data.value.head.s}F${data.value.head.f}`;
};

</script>
<template>
    <el-container>
        <el-header class="app-toolbar-3">
            <el-button type="primary" @click="save">Save</el-button>
            <el-button @click="cancel">Cancel</el-button>
        </el-header>
        <el-main style="padding:10px">
            <table class="app-table-1">
                <tbody>
                    <tr>
                        <th>Name</th>
                        <td><el-input v-model="data.name" style="width:147px"></el-input>
                            <el-button v-show="data.body != null" @click="autoGenerateName"
                                style="margin-left: 15px;">Rename As SxFx</el-button>
                        </td>
                    </tr>
                    <tr>
                        <th>Desc</th>
                        <td><el-input v-model="data.desc" style="width:280px"></el-input></td>
                    </tr>
                    <tr v-show="data.body != null">
                        <th>Stream</th>
                        <td><el-input-number v-model="data.head.s" style="width:120px" :controls-position="'right'"
                                :min="0" :max="127"></el-input-number></td>
                    </tr>
                    <tr v-show="data.body != null">
                        <th>Function</th>
                        <td><el-input-number v-model="data.head.f" style="width:120px" :controls-position="'right'"
                                :min="0" :max="255"></el-input-number></td>
                    </tr>
                    <tr v-show="data.body != null">
                        <th>Reply</th>
                        <td><el-checkbox v-model="data.head.isExpectReply"></el-checkbox></td>
                    </tr>
                </tbody>
            </table>
        </el-main>
    </el-container>

</template>